<script setup lang='ts'>
import {computed} from 'vue';
const props=defineProps({
    rowCount:{
        type:Number,
        default:17
    },
    cardColor:{
        type:String,
        default:'#fff'
    },
    patternColor:{
        type:String,
        default:'#000'
    },
    patternList:{
        type:Array,
        default:()=>[]
    }
})
const data=computed(()=>{
    return props
})

const updatePatternList=(event:Event,item:number)=>{
    if(data.value.patternList.includes(item)){
        const index=data.value.patternList.indexOf(item)
        data.value.patternList.splice(index,1)
    }else{
        data.value.patternList.push(item)
    }
    // emits
}
</script>

<template>
<div class="w-full h-auto" >
    <ul class="pattern-list" :style="{gridTemplateColumns:'repeat('+data.rowCount+',1fr)'}">
        <li @click.stop="(event)=>updatePatternList(event,item)" class="w-5 h-5" v-for="item in data.rowCount*7" :key="item" :style="{backgroundColor:data.patternList.includes(item)?data.patternColor:data.cardColor}">
        </li>
    </ul>
</div>
</template>

<style lang='scss' scoped>
    .pattern-list{
        margin: 0;
        padding: 0;
        display:grid;
        grid-template-rows:repeat(7,1fr);
        grid-gap:1px;
        border:1px solid #000;
        li{
            cursor:pointer;
        }
    }
</style>
